<template>
  <div>
    <el-form-item label="部门范围" class="tr">
      <el-switch v-model="value.__config.deptRange"> </el-switch>
    </el-form-item>
    <el-form-item v-if="value.__config.deptRange">
      <el-select
        size="small"
        class="mb10"
        style="width: 100%"
        v-model="value.__config.deptSelected"
        placeholder="请选择部门"
        clearable
        @change="handleChange"
      >
        <el-option
          v-for="item in deptlList"
          :key="item.modelName"
          :value="item.modelName"
          :label="item.__config.label"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>
<script>
import basicmixins from "./basicmixins";
import { mapGetters } from "vuex";

export default {
  mixins: [basicmixins],
  data() {
    return {
      list: [],
    };
  },
  computed: {
    ...mapGetters(["getFormList"]),
    deptlList() {
      return this.getFormList.filter((i) => i.tagName === "hlDepartment" && i.modelName);
    },
  },
  created() {
    if (!this.value.__config.deptSelected) {
      this.$set(this.value.__config, "deptSelected", "");
    }
    if (!this.value.__config.deptRange) {
      this.$set(this.value.__config, "deptRange", false);
    }
  },
  watch: {
    "value.__config.deptRange": {
      handler(val) {
        if (val) {
          this.$set(this.value.__config, "treeWalker", false);
        }
      },
      immediate: true,
    },
  },

  methods: {
    handleChange(value) {
      this.$set(this.value.__config, "deptSelected", value);
    },
  },
};
</script>
